<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ page isELIgnored="false"%>
<%@ page import="java.sql.*"%>
<%@ page import="java.io.*"%>
<%@ page import="course.method"%>
<%@ page import="javax.swing.*"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Library-System</title>
<link rel="stylesheet" href="<c:url value='css\index.css'></c:url>" />
<%-- <link rel="stylesheet" href="<c:url value='css\bootstrap.css'></c:url>" /> --%>
<link rel="stylesheet" href="<c:url value='css\bootstrap-v4.6.0.css'></c:url>" />
<script src="./lib/echarts.js"></script>
<script src="./lib/jquery.js"></script>
<script src="./lib/axios.js"></script>
<script src="./lib/form-serialize.js"></script>
</head>
<body>
<%
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("text/html");
Connection con = null;
Statement sql;
ResultSet rs;
try{
Class.forName("com.mysql.cj.jdbc.Driver");
}
catch(Exception e){
out.print("<h1>"+e);
}
String url = "jdbc:mysql://localhost:3306/course?"+
"useSSL=false&serverTimezone=GMT&characterEncoding=utf-8";
String user = "root";
String password = "123456";
%>

<div>
<div class="back"></div>
<div class="containerback">
<div id="background"></div>
<div class="banner">
<div class="xiaohui"></div>
<div id="title"><p >长春工业大学图书管理系统</p></div>
<div id="quit">
<img id="quitimg" src="./imgs/退出.png">
<a id="quit1" href="login.jsp">退出</a>
</div>
</div>
<!-- 工作区 -->
<div class="work">
<div class="work-left">
<div class="option">个人信息</div>
<div class="option slide">图书借阅</div>
<div class="option">操作选择</div>
</div>
<!-- 个人信息 -->
<div class="work-right">
<table  style="background-color:white" class="table table-striped">
    <colgroup>
      <col width="20%">
      <col width="10%">
      <col width="10%">
      <col width="10%">
      <col width="10%">
      <col width="10%">
      <col width="10%">
      <col width="24%">
    </colgroup>
    <thead>
      <tr>
        <th scope="col"></th>
        <th scope="col">ID</th>
        <th scope="col">姓名</th>
        <th scope="col">年龄</th>
        <th scope="col">性别</th>
        <th scope="col">学院</th>
        <th scope="col">联系电话</th>
        <th scope="col">籍贯</th>
      </tr>
    </thead>
    <tbody id="tb">
      <%
      String num=(String)request.getAttribute("id");
      try{
     	 con=DriverManager.getConnection(url,user,password);
     	 sql = con.createStatement();
     	 String SQL="SELECT * FROM studentinfo WHERE idnum="+'"'+num+'"';	
     	 rs= sql.executeQuery(SQL);
     	while(rs.next()){
 		    out.print("<tr>");
 		    out.print("<th scope="+"row"+"></th>");
		    out.print("<td>"+rs.getString(1)+"</td>");
		    out.print("<td>"+rs.getString(2)+"</td>");
		    out.print("<td>"+rs.getString(4)+"</td>");
		    out.print("<td>"+rs.getString(6)+"</td>");
		    out.print("<td>"+rs.getString(5)+"</td>");
		    out.print("<td>"+rs.getString(7)+"</td>");
		    out.print("<td>"+rs.getString(8)+"</td>");
		    out.print("</tr>");
 	 } 
     	 con.close();
     
     	 }
     	 catch(SQLException e){
     	 System.out.print("<h1>"+e);
     
     	 }     
      %>
      
      
      
      
      
    </tbody>
  </table>
  
  <!-- 用户信息start -->
<!--   <div class="modal fade" id="updateModal" tabindex="-1" aria-labelledby="updateModalLabel"> -->
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="updateModalLabel">修改用户信息</h5>
          <button type="button" id="closeUpdateBtn" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form action="update" class="container update-form" method="post">
          <div class="row mb-3">
              <label class="col-sm-2 col-form-label-sm">学号</label>
              <div class="col-sm-10">
                <input type="text" class="form-control form-control-sm" name="id" placeholder="学生学号">
              </div>
            </div>
          
            <div class="row mb-3">
              <label class="col-sm-2 col-form-label-sm">姓名</label>
              <div class="col-sm-10">
                <input type="text" class="form-control form-control-sm" name="uname" placeholder="学员姓名">
              </div>
            </div>

            <div class="row mb-3">
              <label class="col-sm-2 col-form-label-sm">年龄</label>
              <div class="col-sm-10">
                <input type="text" class="form-control form-control-sm" name="age" placeholder="学员年龄">
              </div>
            </div>
            <div class="row mb-3">
              <label class="col-sm-2 col-form-label-sm">学院</label>
              <div class="col-sm-10">
                <select class="form-select form-select-sm" name="school">
                  <option selected value="">请选择所属学院</option>
                  <option value="机电工程学院">机电工程学院</option>
                  <option value="计算机科学与工程学院">计算机科学与工程学院</option>
                  <option value="化学与生命科学学院">化学与生命科学学院</option>
                  <option value="人文学院">人文学院</option>
                  <option value="外国语学院">外国语学院</option>
                  <option value="材料科学与工程学院">材料科学与工程学院</option>
                  <option value="经济管理学院">经济管理学院</option>
                  <option value="艺术设计学院">艺术设计学院</option>
                  <option value="应用技术学院">应用技术学院</option>
                  <option value="电器与电子工程学院">电器与电子工程学院</option>
                  <option value="化学工程学院">化学工程学院</option>
                  <option value="信息传播工程学院">信息传播工程学院</option>
                  <option value="数学与统计学院">数学与统计学院</option>
                </select>
              </div>
            </div>

            <div class="row mb-3">
              <label class="col-sm-2 col-form-label-sm">性别</label>
              <div class="col-sm-10 self-valign">
                <div class="col-sm-1 form-check form-check-inline">
                  <input class="form-check-input" type="radio" name="sex" value="男" checked>
                  <label class="form-check-label">男</label>
                </div>
                <div class="col-sm-1 form-check form-check-inline">
                  <input class="form-check-input" type="radio" name="sex" value="女">
                  <label class="form-check-label">女</label>
                </div>
              </div>

            </div>

            <div class="row mb-3">
              <label class="col-sm-2 col-form-label-sm">手机</label>
              <div class="col-sm-10">
                <input type="text" class="form-control form-control-sm" name="phone" placeholder="手机号">
              </div>
            </div>
            <div class="row mb-3">
              <label class="col-sm-2 col-form-label-sm">籍贯</label>
             <div class="col-sm-9">
          <select class="form-select col-4" name="province">
            <option value="">--省--</option>
          </select>
          <select class="form-select col-4" name="city">
            <option value="">--市--</option>
          </select>
          <select class="form-select col-3" name="area">
            <option value="">区</option>
          </select>
        </div>
            </div>

            <div class="row mb-3">
              <div class="col-sm-2"></div>
              <div class="col-sm-10">
                <!-- <input type="hidden" name="id"> -->
                <button type="submit" id="first" class="btn btn-primary btn-sm">确认修改</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
<!--   </div> -->
  <!-- 用户信息end -->
</div>

<!-- 图书借阅 -->
<div class="work-right block">
  <div class="container-fluid">
    <!-- 栅格系统中的一行 -->
    <div class="row">
      <!-- 左侧的表格，占了 8 列 -->
      <div class="col-md-10">
        <table class="table table-bordered table-striped table-dark table-hover text-center ">
          <thead>
            <!-- 表头行 -->
            <tr>
              <th scope="col">ISBN</th>
              <th scope="col">书名</th>
              <th scope="col">作者</th>
              <th scope="col">出版社</th>
              <th scope="col">库存</th>
              <th scope="col">操作</th>
            </tr>
          </thead>
          <tbody id="book">
             <%
             int i = 0;
             try{
            	 con=DriverManager.getConnection(url,user,password);
            	 sql = con.createStatement();
            	 String selectSQL="select*from booklist";	

            	 rs=sql.executeQuery(selectSQL);
            	 while(rs.next()){
            		out.print("<tr>");
            		out.print("<th scope="+"row"+">"+rs.getString(1)+"</th>");
 	    		    out.print("<td>"+rs.getString(2)+"</td>");
 	    		    out.print("<td>"+rs.getString(3)+"</td>");
 	    		    out.print("<td>"+rs.getString(4)+"</td>");
 	    		    out.print("<td>"+rs.getInt(5)+"</td>");
 	    		    out.print("<td><button type="+"button"+" style="+"color:white"+" class="+"btn btn-link btn-sm btn-del"+" data-id="+i+++">借阅</button></td>");
 	    		    out.print("<form action ="+ "Minis"+" method=post>");
 	    		    out.print("<input name=number type=hidden value="+rs.getString(1)+">");
 	    		    out.print("<input hidden type=submit name=del value=删除数据>");
 	    		    out.print("</form>");
 	    		    out.print("</tr>");
            	 }
            	 con.close();
            	 }
            	 catch(SQLException e){
            	 out.print("<h1>"+e);
            	 }                
             %> 
           <!--  </tr> -->
          </tbody>
        </table>
      </div>
    </div>
  </div>
<div class="erweima">
        <img class="ma" src="./imgs/erweima.jpg" alt="">
        <i class="close_btn">x</i>
</div>
</div>



<!-- 座位选择 -->
<div class="work-right">
<div id="main"></div>
<!-- 图书归还 -->
<div class="helper">
     <div class="container">
    <!-- 栅格系统中的一行 -->
    <div class="row">
      <!-- 左侧的表格，占了 8 列 -->
      <div>
        <table class="table table-bordered table-striped table-dark table-hover text-center ">
          <thead>
            <!-- 表头行 -->
            <tr>
              <th scope="col">ISBN</th>
              <th scope="col">书名</th>
              <th scope="col">作者</th>
              <th scope="col">出版社</th>
              <th scope="col">还书时间</th>
              <th scope="col">操作</th>
            </tr>
          </thead>
          <tbody id="book">
            <!-- 表格中的每一行 -->
            <!-- <tr> -->
             <!--  <th scope="row">xxx</th>
              <td>xxx</td>
              <td>xxx</td>
              <td>xxx</td>
              <td>xxx</td>
              <td>
                <button type="button" style="color:white" class="btn btn-link btn-sm btn-del">借阅</button>
              </td> -->
             <%
             int j = 0;
             try{
            	 con=DriverManager.getConnection(url,user,password);
            	 sql = con.createStatement();
            	 String selectSQL="select*from bookselect";	

            	 rs=sql.executeQuery(selectSQL);
            	 while(rs.next()){
            		 out.print("<tr>");
            		out.print("<th scope="+"row"+">"+rs.getString(1)+"</th>");
 	    		    out.print("<td>"+rs.getString(2)+"</td>");
 	    		    out.print("<td>"+rs.getString(3)+"</td>");
 	    		    out.print("<td>"+rs.getString(4)+"</td>");
 	    		    out.print("<td>"+rs.getString(5)+"</td>");
 	    		    out.print("<td><button id="+"backbook"+" type="+"button"+" style="+"color:white"+" class="+"btn btn-link btn-sm btn-del"+" data-num="+j+++">归还</button></td>");
 	    		    out.print("<form action ="+ "back"+" method=post>");
 	    		    out.print("<input name=number type=hidden value="+rs.getString(1)+">");
 	    		    out.print("<input hidden type=submit name=back value=删除数据>");
 	    		    out.print("</form>");
 	    		    out.print("</tr>");
            	 }
            	 con.close();
            	 }
            	 catch(SQLException e){
            	 out.print("<h1>"+e);
            	 }                
             %>   
           <!--  </tr> -->
          </tbody>
        </table>
      </div>
    </div>
  </div>
   
   
   
   
   
   
   
   
       
</div>
</div>
</div>
</div>
</div>
<!-- <script type="module" src="./js/seat.js"></script> -->
<!-- <script src="./js/echarts.js"></script> -->
<script src="./js/seat.js"></script>
<script src="./js/province.js"></script>
<script src="./js/index.js"></script>
</body>
</html>